<template>
  <div class="foem_page">
    <el-card>
      <el-row>
        <!-- 新增 -->
        <el-col :span="12">
          <el-button size="small" type="primary" @click="isShowDialog=true">添加分类</el-button>
        </el-col>
        <!-- 点击筛选数据 -->
        <el-col :span="12">
          <el-input v-model="input" placeholder="输入关键字" type="text" clearable>
            <el-button slot="append" @click="Pagesearch">筛选</el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-divider />
      <el-table
        :data="pageList"
        style="width: 100%;margin-bottom: 20px;"
        border
      >
        <el-table-column
          align="center"
          prop="title"
          label="标题"
          width="500"
        />
        <el-table-column
          align="center"
          label="内容"
          width="500"
        >
          <template #default="scope">
            <el-row v-html="scope.row.content" />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
        >
          <!-- 作用域插槽 默认名字：default  -->
          <template #default="scope">
            <!-- row是饿了么Table表格里面的自定义属性的参数 -->
            <!-- {{ scope.row }} -->
            <!-- 编辑 -->
            <el-button type="primary" icon="el-icon-edit" circle @click="form_redact(scope.row.id)" />
            <!-- 删除 -->
            <el-button type="danger" icon="el-icon-delete" circle @click="form_Delete(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <el-divider />
      <!-- 分页器 -->
      <div class="form_sorter">
        <el-pagination
          layout="total,  prev, pager, next, jumper"
          :total="total"
          :current-page="currentPage"
          @current-change="currentChange"
        />
      </div>

    </el-card>
    <!-- 新增和编辑共用的弹窗 -->
    <!-- 这里给了一个判断，判断pageForm如果有id就跳转到编辑没有就跳到新增 -->
    <el-dialog :title="pageForm.id?'编辑页面':'新增页面'" :visible="isShowDialog">
      <!-- 表单校验的三在重点 model rules prop -->
      <el-form :model="pageForm" :rules="rules">
        <el-form-item prop="title" label="标题" label-width="80px">
          <el-input v-model="pageForm.title" autocomplete="off" placeholder="请输入您的标题" />
        </el-form-item>
        <el-form-item label="内容" label-width="80px">
          <VueEditor ref="VueEditor" :config="config" />
        </el-form-item>
      </el-form>
      <!-- 取消和确定按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanCel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueEditor from 'vue-word-editor'
import 'quill/dist/quill.snow.css'
import { getPageList, getPageCount, getPageDelete, getPageNew, getPageRedact, getPage } from '@/api/page'
export default {
  components: {
    VueEditor
  },
  data() {
    return {
      // getPageSearch: {
      //   page: 1,
      //   size: 5
      // },
      value: false,
      input: '',
      pageList: [],
      isShowDialog: false,
      currentPage: 1,
      pageForm: {
        id: '',
        content: '',
        title: ''
      },
      // 校验新增表单
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      },
      pageParams: {
        _limit: 10,
        _start: 0,
        title_contains: ''
      },
      total: 20,
      config: {
      // 上传图片的配置
        uploadImage: {
          url: 'http://localhost:3000/upload',
          name: 'file',
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            insert('http://localhost:3000' + res.data.url)
          }
        },

        // 上传视频的配置
        uploadVideo: {
          url: 'http://localhost:3000/upload',
          name: 'file',
          uploadSuccess(res, insert) {
            insert('http://localhost:3000' + res.data.url)
          }
        }
      }
    }
  },
  // 页面初始化时需要获取的数据
  created() {
    this.getPageList()
  },
  methods: {
    // 点击确定按钮
    async btnOk() {
      // 点击确定发送请求
      const quill = this.$refs.VueEditor.editor
      this.pageForm.content = quill.root.innerHTML
      if (this.pageForm.id) {
        await getPageRedact(this.pageForm)
      } else {
        await getPageNew(this.pageForm)
      }
      this.isShowDialog = false
      this.getPageList()
    },
    // 取消按钮
    btnCanCel() {
      this.isShowDialog = false
    },
    // 获取所有数据
    async getPageList() {
      const data = await getPageList(this.pageParams)
      this.total = await getPageCount({ title_contains: this.pageParams.title_contains })
      this.pageList = data
      // this.pageList = data.map(item => {
      //   if (item.content.includes('<p>')) {
      //     return {
      //       ...item, content: item.content.slice(3, -4)
      //     }
      //   } else {
      //     return {
      //       ...item
      //     }
      //   }
      // })
      console.log(data, this.pageList)
    },
    // 编辑页面
    async form_redact(id) {
      // 当我点击编辑的时候就会触发，从而获取到当前被点击的id
      this.isShowDialog = true
      this.pageForm = await getPage(id)
      const quill = this.$refs.VueEditor.editor
      quill.root.innerHTML = this.pageForm.content
      console.log(id)
      this.pageForm.id = id
    },
    // 删除页面
    async form_Delete(id) {
      // console.log(id)
      await this.$confirm('您确定删除此数据了吗？')
      await getPageDelete(id)
      this.$message.success('删除成功')
      this.getPageList()
    },
    currentChange(val) {
      this.currentPage = val
      this.pageParams._start = (val - 1) * this.pageParams._limit
      this.getPageList()
    },
    // 搜索
    async Pagesearch() {
      console.log(this.input)
      this.pageParams.title_contains = this.input
      console.log(this.pageParams)
      const res = await getPageList(this.pageParams)
      console.log(res)
      this.getPageList()
    }
  }
}
</script>

<style lang="scss" scoped>
.foem_page{
  padding: 10px;
  .form_sorter{
    text-align: center;
  }

  // .arr{
  //   height: 200px;

  // }
}

</style>
